<template>
  <div>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="all">
      <van-button @click="addUser" class="addUser">
        新增用户
      </van-button>
      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="(item,index) in list" :key="index" :title="item.name" :name="index">
          <div>所属部门:{{item.department_name}}</div>
          <div>联系电话:{{item.mobile}}</div>
          <div>邮箱:{{item.email}}</div>
        </van-collapse-item>

      </van-collapse>
    </van-list>
    <addUser :show_add.sync="show_user" />
  </div>
</template>

<script>
  import addUser from './addUser.vue'
  import {
    UserService
  } from '@/api'
  export default {
    components: {
      addUser,
    },
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        activeNames: [0],
        page: 1,
        limit: 10,
        show_user: false
      };
    },
    mounted() {
      this.$EventBus.$on("update_user_list", () => {
        this.init();
        this.onLoad();
      })
    },
    methods: {
      init() {
        Object.assign(this.$data, this.$options.data())
      },
      addUser() {
        this.show_user = true;
      },
      onLoad() {
        // 异步更新数据
        this.loading = true;
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        UserService.getList({
          page: this.page,
          limit: this.limit
        }).then(res => {
          this.loading = false;
          if (this._.isEmpty(res.data.data) || res.data.data.length < this.limit) {

            this.list = this.list.concat(res.data.data)
            this.finished = true;
          } else {

            this.page++;
            this.list = this.list.concat(res.data.data)
          }


        })

      },
    },
  };
</script>

<style lang="less" scoped>
  .all {
    padding: 24px 0;
    background-color: #f3f5f7;
    height: 100%;

    .addUser {
      margin-bottom: 15px;
      margin-left: 15px;
    }
  }
</style>